<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-bar">
				<view class="nav-back" @tap="goBack">
					<uni-icons type="left" size="20" color="#333"></uni-icons>
					<text class="back-text">返回</text>
				</view>
				<text class="nav-title">账号安全</text>
				<view class="nav-right"></view>
			</view>
		</view>

		<!-- 顶部安全状态卡片 -->
		<view class="security-status-card">
			<view class="status-header">
				<uni-icons type="shield-checkmark" size="24" color="#52c41a"></uni-icons>
				<text class="status-title">账号安全状态</text>
			</view>
			<view class="security-score">
				<text class="score-text">安全评分</text>
				<text class="score-value">{{ securityScore }}</text>
				<text class="score-unit">/100</text>
			</view>
			<view class="security-tips">
				<text class="tip-text">{{ getSecurityTip() }}</text>
			</view>
		</view>

		<!-- 安全设置列表 -->
		<view class="security-section">
			<text class="section-title">安全设置</text>
			<view class="security-list">
				<!-- 登录密码 -->
				<view class="security-item" @tap="goChangePassword">
					<view class="item-left">
						<view class="icon-wrapper password-icon">
							<uni-icons type="locked" size="20" color="#1890ff"></uni-icons>
						</view>
						<view class="item-info">
							<text class="item-title">登录密码</text>
							<text class="item-desc">建议定期更换密码</text>
						</view>
					</view>
					<view class="item-right">
						<text class="item-status">已设置</text>
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>
				</view>

				<!-- 手机绑定 -->
				<view class="security-item" @tap="bindPhone">
					<view class="item-left">
						<view class="icon-wrapper phone-icon">
							<uni-icons type="phone" size="20" color="#52c41a"></uni-icons>
						</view>
						<view class="item-info">
							<text class="item-title">手机绑定</text>
							<text class="item-desc">{{ securityInfo.phone || '未绑定手机号' }}</text>
						</view>
					</view>
					<view class="item-right">
						<text class="item-status" :class="{ 'unbound': !securityInfo.phone }">
							{{ securityInfo.phone ? '已绑定' : '未绑定' }}
						</text>
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>
				</view>

				<!-- 邮箱绑定 -->
				<view class="security-item" @tap="bindEmail">
					<view class="item-left">
						<view class="icon-wrapper email-icon">
							<uni-icons type="email" size="20" color="#fa8c16"></uni-icons>
						</view>
						<view class="item-info">
							<text class="item-title">邮箱绑定</text>
							<text class="item-desc">{{ securityInfo.email || '未绑定邮箱' }}</text>
						</view>
					</view>
					<view class="item-right">
						<text class="item-status" :class="{ 'unbound': !securityInfo.email }">
							{{ securityInfo.email ? '已绑定' : '未绑定' }}
						</text>
						<uni-icons type="right" size="16" color="#ccc"></uni-icons>
					</view>
				</view>

				<!-- 两步验证 -->
				<view class="security-item" @tap="toggleTwoFactor">
					<view class="item-left">
						<view class="icon-wrapper twofa-icon" :class="{ 'enabled': securityInfo.twoFactorEnabled }">
							<uni-icons type="shield" size="20" :color="securityInfo.twoFactorEnabled ? '#52c41a' : '#999'"></uni-icons>
						</view>
						<view class="item-info">
							<text class="item-title">两步验证</text>
							<text class="item-desc">{{ securityInfo.twoFactorEnabled ? '已开启，账号更安全' : '未开启，建议开启' }}</text>
						</view>
					</view>
					<view class="item-right">
						<view class="toggle-switch" :class="{ 'active': securityInfo.twoFactorEnabled }">
							<view class="toggle-dot"></view>
						</view>
					</view>
				</view>
			</view>
		</view>



		<!-- 登录设备管理 -->
		<view class="device-section">
			<view class="section-header">
				<text class="section-title">登录设备</text>
				<uni-button size="mini" type="warn" @tap="revokeAllSessions">全部下线</uni-button>
			</view>
			<view class="device-list">
				<view v-for="device in securityInfo.sessions" :key="device.sessionId" class="device-item">
					<view class="device-icon">
						<uni-icons :type="getDeviceIcon(device.deviceName)" size="20" color="#666"></uni-icons>
					</view>
					<view class="device-info">
						<text class="device-name">{{ device.deviceName }}</text>
						<text class="device-meta">{{ device.location }} · {{ device.lastLoginTime }}</text>
					</view>
					<view class="device-actions">
						<text v-if="device.isCurrent" class="current-tag">当前设备</text>
						<uni-button v-else size="mini" type="warn" @tap="revokeSession(device.sessionId)">下线</uni-button>
					</view>
				</view>
				<view v-if="securityInfo.sessions.length === 0" class="empty-devices">
					<uni-icons type="info" size="20" color="#ccc"></uni-icons>
					<text class="empty-text">暂无登录设备记录</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			securityInfo: {
				phone: '',
				email: '',
				twoFactorEnabled: false,
				sessions: []
			}
		}
	},
	computed: {
		// 计算安全评分
		securityScore() {
			let score = 0;
			if (this.securityInfo.phone) score += 25;
			if (this.securityInfo.email) score += 25;
			if (this.securityInfo.twoFactorEnabled) score += 50;
			return score;
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},

		// 获取安全提示
		getSecurityTip() {
			if (this.securityScore >= 80) return '您的账号安全等级很高，继续保持！';
			if (this.securityScore >= 60) return '建议绑定手机和邮箱，提高账号安全性';
			if (this.securityScore >= 40) return '建议开启两步验证，大幅提升账号安全';
			return '建议完善所有安全设置，保护账号安全';
		},

		// 获取设备图标
		getDeviceIcon(deviceName) {
			if (deviceName.includes('iPhone') || deviceName.includes('iPad')) return 'phone';
			if (deviceName.includes('Android')) return 'phone';
			if (deviceName.includes('Mac') || deviceName.includes('Windows')) return 'desktop';
			return 'laptop';
		},

		// 获取账号安全信息
		fetchSecurityInfo() {
			// 从本地存储读取安全信息
			try {
				const savedInfo = uni.getStorageSync('securityInfo');
				if (savedInfo) {
					this.securityInfo = { ...this.securityInfo, ...savedInfo };
				}
			} catch (e) {
				console.error('读取安全信息失败:', e);
			}
			
			// 实际项目中应该调用后端接口
			// uni.request({
			// 	url: '/api/account/security',
			// 	method: 'GET',
			// 	header: {
			// 		'Authorization': 'Bearer ' + uni.getStorageSync('token')
			// 	},
			// 	success: (res) => {
			// 		if (res.data?.success) {
			// 			this.securityInfo = res.data.data;
			// 			this.saveSecurityInfo();
			// 		}
			// 	}
			// });
		},

		// 绑定手机号
		bindPhone() {
			console.log('手机绑定被点击');
			uni.showToast({
				title: '跳转到手机绑定',
				icon: 'none'
			});
			
			uni.navigateTo({
				url: '/pages/security/bind-phone',
				success: () => {
					console.log('跳转成功');
				},
				fail: (err) => {
					console.error('跳转失败:', err);
					uni.showToast({
						title: '跳转失败: ' + err.errMsg,
						icon: 'none'
					});
				}
			});
		},

		// 绑定邮箱
		bindEmail() {
			console.log('邮箱绑定被点击');
			uni.showToast({
				title: '跳转到邮箱绑定',
				icon: 'none'
			});
			
			uni.navigateTo({
				url: '/pages/security/bind-email',
				success: () => {
					console.log('跳转成功');
				},
				fail: (err) => {
					console.error('跳转失败:', err);
					uni.showToast({
						title: '跳转失败: ' + err.errMsg,
						icon: 'none'
					});
				}
			});
		},

		// 开启/关闭两步验证
		toggleTwoFactor() {
			console.log('两步验证被点击');
			uni.showToast({
				title: '跳转到两步验证',
				icon: 'none'
			});
			
			if (this.securityInfo.twoFactorEnabled) {
				// 关闭两步验证
				uni.showModal({
					title: '关闭两步验证',
					content: '确定要关闭两步验证吗？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/security/disable-2fa',
								fail: (err) => {
									console.error('跳转失败:', err);
									uni.showToast({
										title: '跳转失败: ' + err.errMsg,
										icon: 'none'
									});
								}
							});
						}
					}
				});
			} else {
				// 开启两步验证
				uni.navigateTo({
					url: '/pages/security/enable-2fa',
					success: () => {
						console.log('跳转成功');
					},
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '跳转失败: ' + err.errMsg,
							icon: 'none'
						});
					}
				});
			}
		},

		// 下线指定设备
		revokeSession(sessionId) {
			uni.showModal({
				title: '下线设备',
				content: '确定要下线此设备吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('下线设备:', sessionId);
						uni.showToast({ title: '设备已下线', icon: 'success' });
					}
				}
			});
		},

		// 下线所有设备
		revokeAllSessions() {
			uni.showModal({
				title: '下线所有设备',
				content: '确定要下线所有设备吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('下线所有设备');
						uni.showToast({ title: '所有设备已下线', icon: 'success' });
					}
				}
			});
		},

		// 修改密码
		goChangePassword() {
			console.log('跳转到修改密码');
			uni.navigateTo({ 
				url: '/pages/password/password',
				fail: (err) => {
					console.error('跳转失败:', err);
					uni.showToast({
						title: '跳转失败: ' + err.errMsg,
						icon: 'none'
					});
				}
			});
		},

		// 处理安全信息更新
		handleSecurityInfoUpdate(data) {
			console.log('收到安全信息更新:', data);
			
			// 更新对应的安全信息
			if (data.type === 'phone') {
				this.securityInfo.phone = data.value;
				uni.showToast({
					title: '手机绑定成功',
					icon: 'success'
				});
			} else if (data.type === 'email') {
				this.securityInfo.email = data.value;
				uni.showToast({
					title: '邮箱绑定成功',
					icon: 'success'
				});
			} else if (data.type === 'twoFactor') {
				this.securityInfo.twoFactorEnabled = data.value;
				uni.showToast({
					title: data.value ? '两步验证已开启' : '两步验证已关闭',
					icon: 'success'
				});
			}
			
			// 保存到本地存储
			this.saveSecurityInfo();
		},

		// 保存安全信息到本地存储
		saveSecurityInfo() {
			try {
				uni.setStorageSync('securityInfo', this.securityInfo);
			} catch (e) {
				console.error('保存安全信息失败:', e);
			}
		},


	},

	onLoad() {
		console.log('安全页面加载');
		this.fetchSecurityInfo();
		
		// 监听子页面数据更新事件
		uni.$on('securityInfoUpdated', this.handleSecurityInfoUpdate);
	},
	
	onUnload() {
		// 移除事件监听器
		uni.$off('securityInfoUpdated', this.handleSecurityInfoUpdate);
	}
}
</script>

<style>
	page {
		background-color: #f5f6fa;
	}

	.container { 
		padding: 0; 
		min-height: 100vh;
		background: #f5f5f5;
	}

	/* 导航栏样式 */
	.nav-header {
		background: #ffffff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
	}

	.nav-back {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 10rpx 16rpx;
		border-radius: 8rpx;
		transition: background-color 0.2s ease;
		cursor: pointer;
	}

	.nav-back:active {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.back-text {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.nav-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.nav-right {
		width: 40rpx;
	}

	/* 安全状态卡片 */
	.security-status-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		margin: 30rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
	}

	.status-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 20rpx;
	}

	.status-title {
		font-size: 18px;
		font-weight: 600;
		color: #ffffff;
	}

	.security-score {
		display: flex;
		align-items: baseline;
		gap: 8rpx;
		margin-bottom: 16rpx;
	}

	.score-text {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.8);
	}

	.score-value {
		font-size: 36px;
		font-weight: 700;
		color: #ffffff;
	}

	.score-unit {
		font-size: 16px;
		color: rgba(255, 255, 255, 0.8);
	}

	.security-tips {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 10rpx;
		padding: 16rpx;
	}

	.tip-text {
		font-size: 14px;
		color: rgba(255, 255, 255, 0.9);
		line-height: 1.4;
	}

	/* 安全设置区域 */
	.security-section {
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 20px;
		font-weight: 700;
		color: #333;
		margin-bottom: 20rpx;
		display: block;
	}

	.security-list {
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		margin: 0 30rpx;
	}

	.security-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		border-bottom: 1px solid #f0f0f0;
		transition: background-color 0.2s ease;
	}

	.security-item:last-child {
		border-bottom: none;
	}

	.security-item:active {
		background-color: #f8f9fa;
	}

	.item-left {
		display: flex;
		align-items: center;
		gap: 16rpx;
		flex: 1;
	}

	.icon-wrapper {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.password-icon {
		background: linear-gradient(135deg, #1890ff, #40a9ff);
	}

	.phone-icon {
		background: linear-gradient(135deg, #52c41a, #73d13d);
	}

	.email-icon {
		background: linear-gradient(135deg, #fa8c16, #ffa940);
	}

	.twofa-icon {
		background: linear-gradient(135deg, #999, #ccc);
	}

	.twofa-icon.enabled {
		background: linear-gradient(135deg, #52c41a, #73d13d);
	}

	.item-info {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
		flex: 1;
	}

	.item-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.item-desc {
		font-size: 12px;
		color: #999;
		line-height: 1.4;
	}

	.item-right {
		display: flex;
		align-items: center;
		gap: 12rpx;
	}

	.item-status {
		font-size: 12px;
		color: #52c41a;
		font-weight: 500;
	}

	.item-status.unbound {
		color: #ff4d4f;
	}

	/* 开关样式 */
	.toggle-switch {
		width: 80rpx;
		height: 40rpx;
		background: #e0e0e0;
		border-radius: 20rpx;
		position: relative;
		transition: background-color 0.3s ease;
	}

	.toggle-switch.active {
		background: #52c41a;
	}

	.toggle-dot {
		width: 36rpx;
		height: 36rpx;
		background: #ffffff;
		border-radius: 50%;
		position: absolute;
		top: 2rpx;
		left: 2rpx;
		transition: transform 0.3s ease;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.toggle-switch.active .toggle-dot {
		transform: translateX(40rpx);
	}



	/* 设备管理区域 */
	.device-section {
		margin: 0 30rpx 30rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.device-list {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	}

	.device-item {
		display: flex;
		align-items: center;
		gap: 16rpx;
		padding: 20rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.device-item:last-child {
		border-bottom: none;
	}

	.device-icon {
		width: 50rpx;
		height: 50rpx;
		background: #f5f5f5;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.device-info {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
		flex: 1;
	}

	.device-name {
		font-size: 16px;
		font-weight: 600;
		color: #333;
	}

	.device-meta {
		font-size: 12px;
		color: #999;
	}

	.device-actions {
		display: flex;
		align-items: center;
	}

	.current-tag {
		font-size: 12px;
		color: #52c41a;
		background: #f6ffed;
		padding: 6rpx 12rpx;
		border-radius: 12rpx;
		border: 1px solid #b7eb8f;
	}

	.empty-devices {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
		padding: 40rpx 20rpx;
		color: #ccc;
	}

	.empty-text {
		font-size: 14px;
		color: #999;
	}
</style>
